import React, { useEffect, useState } from "react";
import Header from "../components/Header";

import { Swiper, Image, InfiniteScroll, PullToRefresh } from "antd-mobile";

import "./Index.less";

import { proListApi, bannerListApi } from "../../../api/index";

// 如果是写死的，不会变的数据，尽可能地写到组件的外面
// 避免重新渲染的时候，再一次地赋值，从而增加内存
// 导航列表
const navList = [
  {
    navid: 1,
    title: "嗨购超市",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png",
  },
  {
    navid: 2,
    title: "数码电器",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg",
  },
  {
    navid: 3,
    title: "嗨购服饰",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg",
  },
  {
    navid: 4,
    title: "嗨购生鲜",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg",
  },
  {
    navid: 5,
    title: "嗨购到家",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg.dpg",
  },
  {
    navid: 6,
    title: "充值缴费",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg.dpg",
  },
  {
    navid: 7,
    title: "9.9元拼",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png!q70.jpg.dpg",
  },
  {
    navid: 8,
    title: "领券",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png!q70.jpg.dpg",
  },
  {
    navid: 9,
    title: "领金贴",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png!q70.jpg.dpg",
  },
  {
    navid: 10,
    title: "plus会员",
    imgurl:
      "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png!q70.jpg.dpg",
  },
];

const Index = () => {
  const [list, setList] = useState([]);
  const [hasMore, setHasMore] = useState(false);
  const [count, setCount] = useState(1);
  useEffect(() => {
    (async () => {
      const res = await bannerListApi();
      res && setList(res);
    })();
  }, []);

  const [pro, setPro] = useState([]);
  useEffect(() => {
    (async () => {
      try {
        setHasMore(false);
        const res = await proListApi({
          count: count,
          limitNum: 10,
        });
        if (res) {
          setPro((v) => [...v, ...res]);
          if (res.length === 10) {
            setHasMore(true);
          } else {
            setHasMore(false);
          }
        }
      } catch (err) {
        console.log(err);
      }
    })();
  }, [count]);

  const loadMore = () => {
    // console.log("拉到低了");
    setCount((v) => v + 1);
  };

  const onRefresh = () => {
    console.log("下拉刷新");
  };

  return (
    <div className="home-wrap">
      <PullToRefresh onRefresh={onRefresh}>
        <Header title="首页"></Header>
        <Swiper loop style={{ height: "250px" }}>
          {list.map((item, index) => (
            <Swiper.Item key={index}>
              <Image src={item.img} style={{ height: "250px" }} />
            </Swiper.Item>
          ))}
        </Swiper>

        <div className="grid-box">
          {navList.map((item) => (
            <div className="grid-item" key={item.navid}>
              <Image src={item.imgurl} className="grid-img" />
              <p>{item.title}</p>
            </div>
          ))}
        </div>

        {/* 产品列表 */}
        <div className="pro-box">
          {pro.map((item, i) => {
            return (
              <div key={i} className="pro-item">
                <Image
                  src={item.img1}
                  style={{ height: "200px", width: "100%" }}
                />
                <div className="desc">
                  <p>{item.proname}</p>
                  <span className="price">￥ {item.originprice}</span>
                </div>
              </div>
            );
          })}
        </div>

        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </PullToRefresh>
    </div>
  );
};

export default Index;
